<template>
    <div class="login_container">
       <el-row>
            <el-col :span="12" :xs="0"> </el-col>
            <el-col :span="12" :xs="24">
                <!-- 在 el-form 绑定校验的对象model和规则rules -->
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="refForm">
                    <h1>你好</h1>
                    <h2>欢迎来到后台管理系统</h2>
                    <!-- 在 el-form-item 绑定校验对象的属性prop -->
                    <el-form-item class="from_item" prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item class="from_item" prop="password">
                        <el-input
                            :prefix-icon="Lock"
                            type="password"
                            show-password
                            v-model="loginForm.password"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="from_item">
                        <el-button :loading="lodingState" type="primary" class="from_btn" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
       </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
import { ElMessage, ElNotification } from 'element-plus';

import { reactive, ref } from 'vue';

import useUserStore from '@/store/modules/user'
import { useRouter,useRoute } from 'vue-router';

import {getTime} from '@/utils/getTime'

let $router = useRouter();
let $route = useRoute();

let userStore = useUserStore();

let loginForm = reactive({
    username:'admin',
    password:'111111'
})

let refForm = ref()

let lodingState = ref(false)

// 登录方法
const login = async () => {
    // 校验el的rules规则
    refForm.value.validate().then( async()=>{
        lodingState.value = true
        await userStore.userLogin(loginForm).then((res:any)=>{
            console.log(res);
            ElNotification({
                type: 'success',
                message: '欢迎回来',
                title: `嗨，${getTime()}好！`
            })

            let redirect = $route.query.redirect as string
            $router.push({ path: redirect || '/'})
        }).catch((err:any)=>{
            console.log(err);
            ElNotification({
                type: 'error',
                message: '登陆失败'
            })
        }).finally(()=>{
            lodingState.value = false
        })
    }).catch(()=>{
        ElMessage({
            message: '账号或密码不符合规则',
            type: "warning"
        })
    })


}

// 自定义校验规则，可以书写正则以满足项目需求
const validatorPassword = (rule: any, value: any, callback: any)=>{
    // rule对则对象
    // value输入的值
    // callback放行，不符合规则时，可以注入错误信息
    if(value.length >= 6 && value.length <= 10){
        callback()
    }else{
        callback(new Error('密码不符合规则'))
    }
}

// el的form检验规则，ref和reactive是vue3定义响应式对象的，这里不需要设置响应式，没必要损耗性能
// 规则较多时应该独立为一个ts文件
const rules = {
    // username: [
    //     { required: true, min: 3, max: 8, message: '用户名的长度在3-8之间', trigger: 'blur' },
    // ],
    // 自定义校验规则
    password: [
        {validator: validatorPassword, trigger: 'change' }
    ]
}

</script>

<style lang="scss" scoped>
.login_container{
    width: 100vw;
    min-width: 600px;
    min-height: 600px;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
    .login_form{
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        border-radius: 20px;
        overflow: hidden;
        width: 600px;
        padding: 30px;
        position: relative;
        top: calc((100vh - 318px)/2);
        color: #000;
        h1{
            font-size: 40px;
            color: white;
            margin-bottom: 20px;
        }
        h2{
            font-size: 22px;
            color: white;
            margin-bottom: 20px;
        }
        el-form-item{
            margin: 0 50px;
        }
        .from_item{
            margin: 20px 50px;
        }
        .from_btn{
            width: 100%;
        }
    }
}
</style>